import { createRouter, createWebHashHistory } from 'vue-router'

// 导入公共布局组件
import layout from '@/views/Layout'
// 导入首页(公共布局下的第一个子路由)
import Home from '@/views/Home'
// 导入一级分类页
import Category from '@/views/Category'
// 导入二级分类页
import CategorySub from '@/views/Category/sub.vue'
// 导入二级商品详情页
import goods from '@/views/Goods/index.vue'
// 导入登录页(懒加载)
const Login = () => import('@/views/Login/index.vue')
// 导入QQ回跳页面
const LoginCallBack = () => import('@/views/Login/callback')
// 导入购物车页
const Cart = () => import('@/views/Cart/index.vue')
// 导入下单页
const Settlement = () => import('@/views/Member/settlement')
// 导入订单列表页
const Order = () => import('@/views/Member/order')
// 导入支付页面
const Pay = () => import('@/views/Member/pay/index')

// 导入消息提示测试
const Test = () => import('@/views/test/index.vue')

// 路由配置数组
const routes = [
  //  / 是默认路由, 设置二级路由,因为是要默认同时展开,所以都设置了 /
  {
    path: '/',
    component: layout,
    children: [
      // 首页
      { path: '/', component: Home },
      // 一级分类页(动态路由),传参
      { path: '/category/:id', component: Category },
      // 二级分类路由
      { path: '/category/sub/:id', component: CategorySub },
      // 2级商品详情页路由(动态路由),传参
      { path: '/goods/:id', component: goods },
      // 购物车路由页面
      { path: '/cart', component: Cart },
      // 下单路由页面
      { path: '/settlement', component: Settlement },
      // 订单列表路由
      { path: '/order', component: Order },
      // 支付页面路由
      { path: '/pay', component: Pay }
    ]
  },

  // 登录
  { path: '/login', component: Login },

  // QQ回跳
  { path: '/login/callback', component: LoginCallBack },

  // 测试路由
  { path: '/test', component: Test }

]

// vue3.0创建路由router实例,使用 createRouter()
const router = createRouter({
  // hash的路由模式,兼容性更强
  history: createWebHashHistory(),
  routes
})

export default router
